<%@ include file="/common/taglibs.jsp"%>
<%@ taglib prefix="content" tagdir="/WEB-INF/tags/content"%>
<%@page import="java.util.Random"%>
<%--
	read me: 
	1.鼠标移动到广告数字和广告的时候定时器结束，移开广告数字和广告时候从该数字开始继续循环播放。
--%>
<%
	//构造一个随机数，以便同一个页面可以使用多次
	String viewId =String.valueOf(new Random().nextInt(500));
	jspContext.setAttribute("viewId",viewId);
	
%>
<div id="ad_${viewId}_content">
	<c:forEach  items="${advertisements}" var="advertisement" varStatus="status">
		<div id="ad_${viewId}_${status.index}_content" class="box-focuspic" <c:if test="${!status.first}">style="display: none;"</c:if>>
			<content:displayOneAd advertisement="${advertisement}" />
		</div>
	</c:forEach>
</div>

<c:if test="${fn:length(advertisements)>0}">
	<c:set var="len" value="${fn:length(advertisements)}" />
	<ul class="num" id="ad_${viewId}">
		<c:forEach items="${advertisements}" var="advertisement" varStatus="status">
			<li>
				<a id="ad_${viewId}_${status.index}" <c:if test="${status.first}">class="curr"</c:if>>${(status.index + 1)}</a>
			</li>
		</c:forEach>
	</ul>
</c:if>

<script type="text/javascript">

$j(document).ready(function () {
    
	<c:if test="${fn:length(advertisements)>1}">
		intervalTime = 10000;
		
		$j('#ad_${viewId} li a').hover(
			function(){
				$j(this).parent('li').siblings().find('a').removeClass("curr");
				$j(this).addClass("curr");
				var jAdContent = $j('#'+$j(this).attr("id")+'_content');
				jAdContent.siblings().hide();
				jAdContent.show();
				clearInterval(timeInterval_${viewId});
			},
			function(){
				clearInterval(timeInterval_${viewId});
				timeInterval_${viewId} = setInterval("cyclePaly('ad_${viewId}')",intervalTime);
			}
		);
		$j('#ad_${viewId}_content').hover(
			function(){
				clearInterval(timeInterval_${viewId});
			},
			function(){
				clearInterval(timeInterval_${viewId});
				timeInterval_${viewId} = setInterval("cyclePaly('ad_${viewId}')",intervalTime);
			}
		);
		var timeInterval_${viewId} = setInterval("cyclePaly('ad_${viewId}')",intervalTime);
		
	</c:if>
	
});

function cyclePaly(adNumId){
	var size = 	$j('#'+adNumId).find('li').length;
	for(var i=0; i<size; i=i+1){
		if($j('#'+adNumId).find('li:eq('+i+') a').hasClass("curr")){
			var nextIndex;
			if(i<size-1){
				nextIndex = i+1; 
			}else{
			   nextIndex = 0;
			}
			var jAdNum = $j('#'+adNumId).find('li:eq('+nextIndex+') a');
			jAdNum.parent('li').siblings().find('a').removeClass("curr");
			jAdNum.addClass("curr");
			var jAdContent = $j('#'+jAdNum.attr("id")+'_content');
			jAdContent.siblings().hide();
			jAdContent.show();
			break; //must break
		}
	}
}

</script>

